import { Link } from 'umi';
import { useLocation } from 'umi';
import type { MenuProps } from 'antd';
import React, { useEffect, useState } from 'react'
import { Layout, Menu, theme } from 'antd';
import { items } from './config';



const { Sider } = Layout

// type MenuItem = Required<MenuProps>['items'][number];



export default function LHSider() {

    const {
        token: { colorBgContainer },
    } = theme.useToken();

    const location = useLocation()
    // console.log("🚀 ~ LHSider ~ location:", location)

    const [selectedKeys, setSelectedKeys] = useState<any[]>([])
    const [openKeys, setOpenKeys] = useState<string[]>([])

    // 根据 location.pathname 设置 setSelectedKeys
    useEffect(() => {
        const { pathname } = location
        if (pathname === '/') {
            setSelectedKeys(['/DashBoard'])
            return
        }
        setSelectedKeys([pathname])
        const parentKey = pathname.split('/').slice(0, -1).join('/')
        if (parentKey) {
            setOpenKeys([parentKey])
        } else {
            setOpenKeys([])
        }
    }, [location])

    const onClick: MenuProps['onClick'] = (e) => {
        // console.log('click ', e);
        setSelectedKeys([e.key])
        if (e.keyPath.length > 1) {
            setOpenKeys(e.keyPath.slice(1))
        } else {
            setOpenKeys([])
        }
    };

    const onOpenChange: MenuProps['onOpenChange'] = (openKeys) => {
        setOpenKeys(openKeys)
    }

    return (
        // style={{ background: colorBgContainer }}
        <Sider theme='light' collapsible>
            <Menu
                items={items}
                selectedKeys={selectedKeys}
                mode="inline"
                onClick={onClick}
                openKeys={openKeys}
                onOpenChange={onOpenChange}
                theme='light'
            />
        </Sider>
    )
}
